<template>
  <div>
    <input
      ref="excelInputRef"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleClick"
    />
    <div
      class="drop"
      @drop="handleDrop"
      @dragover="handleDragover"
      @dragenter="handleDragover"
    >
      <template v-if="!!excelData.file">
        <span class="file-name">
          {{ excelData.file.name }}
        </span>
      </template>
      <template v-else>
        <span> Drop excel file here or</span>
      </template>

      <el-button
        :loading="loading"
        style="margin-left: 16px"
        size="small"
        type="primary"
        @click="handleUpload"
      >
        Browse
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import * as XLSX from "xlsx";
import { ElMessage } from "element-plus";
export default {
  name:"UploadExcel",
  props: {
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function, // eslint-disable-line
  },
  setup(props) {
    const { beforeUpload, onSuccess } = props;
    const loading = ref(false);
    const excelData = reactive({
      file: null,
    });
    const excelInputRef = ref(null);
    const generateData = (file) => {
      excelData.file = file;
      onSuccess && onSuccess(excelData);
    };
    const handleDrop = (e) => {
      e.stopPropagation();
      e.preventDefault();
      if (loading.value) return;
      const files = e.dataTransfer.files;
      if (files.length !== 1) {
        ElMessage.error("Only support uploading one file!");
        return;
      }
      const rawFile = files[0]; // only use files[0]

      if (!isExcel(rawFile)) {
        ElMessage.error("Only supports upload .xlsx, .xls, .csv suffix files");
        return false;
      }
      upload(rawFile);
      e.stopPropagation();
      e.preventDefault();
    };
    const handleDragover = (e) => {
      e.stopPropagation();
      e.preventDefault();
      e.dataTransfer.dropEffect = "copy";
    };
    const handleUpload = () => {
      excelInputRef.value && excelInputRef.value.click();
    };
    const handleClick = (e) => {
      const files = e.target.files;
      const rawFile = files[0]; // only use files[0]
      if (!rawFile) return;
      upload(rawFile);
    };
    const upload = (rawFile) => {
      let el = document.getElementsByClassName("excel-upload-input")[0];
      el.value = null; // fix can't select the same excel
      if (!beforeUpload) {
        generateData(rawFile);
        return;
      }
      const before = beforeUpload(rawFile);
      if (before) {
        generateData(rawFile);
      }
    };
    const isExcel = (file) => {
      return /\.(xlsx|xls)$/.test(file.name);
    };

    const removeFile = () => {
      excelData.file = null;
      excelData.results = null;
      excelData.header = null;
    };
    return {
      loading,
      excelData,
      excelInputRef,
      handleDragover,
      handleClick,
      handleUpload,
      handleDrop,
      removeFile,
    };
  },
};
</script>

<style scoped>
.excel-upload-input {
  display: none;
  z-index: -9999;
}

.drop {
  border: 2px dashed #bbb;
  width: 100%;
  height: 100px;
  margin: 0 auto;
  font-size: 24px;
  border-radius: 5px;
  text-align: center;
  color: #bbb;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.file-name {
  cursor: auto;
  font-size: 16px;
}
</style>
